<template>
	<view class="content">
		<image class="logo" src="/static/logo.gif"></image>
		<text class="MeDescribe">屏山县统计局</text>
		<view class="form-item">
			<view class="title">地头宽</view>
			<input class="uni-input" type="digit" v-model.number="pageData.ridgeWidth" />
		</view>
		<view class="form-item">
			<view class="title">总垄数</view>
			<input class="uni-input" type="digit" v-model.number="pageData.totalRidgeCount" />
		</view>
		<view class="form-item">
			<view class="title">平均垄长</view>
			<input class="uni-input" type="digit" v-model.number="pageData.avgRidgeLength" />
		</view>
		<view class="form-item buton">
			<button type="primary" @click="onFormSubmit">计算</button>
			<button type="default" @click="onFormReset">重置</button>
		</view>
		<view class="info">
			垄测法:适用于条播作物或株行距种植较大的作物，小样本一般取长形样本。根据地块种植作物的垄数，除以4,得到小样本放置的垄数;用平均垄长除以4，得到小样本放置的位置;用地头宽，除以总垄数，得到小样本的平均宽度;用20平方市尺(2.22平方米)，除以平均宽度，得到小样本收割的长度。
		</view>
		<up-toast ref="uToastRef"></up-toast>
	</view>
</template>

<script setup lang="ts" name="index">
import { reactive, ref } from 'vue';
import IndexClass from './index';
import * as global from '@/static/global';

const pageData = reactive(new IndexClass());
const uToastRef = ref(null);

// 验证函数，接受一个响应式引用和一个错误消息
const validateField = (field: number | string, errorMessage: string) => {
	if (field <= 0 || field == undefined) {
		uToastRef.value.show({
			type: 'error',
			message: errorMessage,
			duration: 3000
		});
		return true;
	}
	return false;
};

const onFormSubmit = () => {
	if (validateField(pageData.ridgeWidth, '【地头宽】数据不能为空或小于等于0！')) {
		return;
	}
	if (validateField(pageData.totalRidgeCount, '【总垄数】数据不能为空或小于等于0！')) {
		return;
	}
	if (validateField(pageData.avgRidgeLength, '【平均垄长】数据不能为空或小于等于0！')) {
		return;
	}

	// 如果所有验证都通过，则继续执行表单提交的逻辑
	// 这里可以添加更多的表单处理逻辑

	pageData.avgRidgeWidth = Math.round((((pageData.ridgeWidth as number) / (pageData.totalRidgeCount as number)) as number) * 10) / 10;
	pageData.sampleLocation = Math.round(((pageData.avgRidgeLength as number) / 4) * 10) / 10;
	pageData.ridgeDistance = Math.round((pageData.totalRidgeCount as number) / 4);
	pageData.sampleLength = Math.round((2.22 / pageData.avgRidgeWidth) * 10) / 10;

	uToastRef.value.show({
		type: 'success',
		message: '计算成功',
		position: 'top',
		duration: 1000,
		complete() {
			try {
				uni.setStorageSync(global.global_storageKey, pageData);
				uni.navigateTo({
					url: '/pages/info/info'
				});
			} catch (e) {
				// error
			}
		}
	});
};
const onFormReset = () => {
	pageData.ridgeWidth = '';
	pageData.avgRidgeLength = '';
	pageData.totalRidgeCount = '';
};

uni.$on('clear_' + global.global_storageKey, (data) => {
	try {
		uni.removeStorageSync(global.global_storageKey);
		console.log(data);
	} catch (e) {
		// error
	}
});
</script>

<style scoped lang="scss">
.content {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 20rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 30rpx;
	}

	.MeDescribe {
		color: #8f8f94;
		letter-spacing: 0.3em;
		margin-bottom: 50rpx;
	}

	.form-item {
		margin-bottom: 15rpx;
		display: flex;
		align-items: center;

		.title {
			width: 100rpx;
			font-size: 20rpx;
			font-weight: bold;
			margin-right: 15rpx;
			text-align: justify;
			text-align-last: justify;
		}

		.uni-input {
			height: 45rpx;
			font-size: 25rpx;
			padding: 3rpx 10rpx;
			flex: 1;
			background-color: #ececec;
		}
	}

	.buton {
		margin-top: 20rpx;

		button {
			margin: 0 10rpx;
			width: 120rpx;
		}
	}

	.info {
		border: 0px solid red;
		width: 500rpx;
		line-height: 30rpx;
		color: darkgray;
		font-size: 20rpx;
		margin-top: 50rpx;
		text-indent: 40rpx;
		letter-spacing: 2rpx;
		padding-bottom: 15rpx;
	}
}
</style>
